<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">

    <script type="text/javascript" src="./js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="./js/math/math.min.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/axios.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/vant.min.js"></script>
</head>

<body>
<div id="app">
    <div class="w100 pr" id="xbk" style="height:100%;" v-if="isShow" v-title data-title="商品详情">
        <div>
            <div style="height:calc(100vh - 70px);width:100%;overflow: scroll;" id="bod" class="pr" @scroll="handleScroll">
                <div style="position: fixed;;top:0px;left:0px;padding:20px 15px 20px 15px;background:#fff;z-index:99;width:100%;box-sizing: border-box;" class="maxtop" v-if="scrollflag">
                    <div class="allcenter" >
                        <p class="fz20 fb" style="color:#111;width:70%;">{{Detail.customization_data.name}}</p>
                        <div style="display: flex;justify-content: center;align-items: center;width:30%">
                            <img v-if="num>1" width="20px" src="./assets/sub.png" @click.stop="sub" alt="">
                            <img v-else width="23px" src="./assets/sub1.png" alt="">
                            <p style="margin:0 10px">{{num}}</p>
                            <img width="20px" src="./assets/xbk/add1.png" @click="add" alt="">
                        </div>
                    </div>
                    <div style="width:100%;height:1px;background:#e5e5e5;margin:15px 0"></div>
                    <p class="fz14" style="color:#666">{{Detail.customization_data.product_des}}</p>
                </div>
                <div style="height:30vh;width:100%;background:#000;" class="allcenter">
                    <img :src="Detail.customization_data.default_image" style="height:25vh" alt="">
                </div>
                <div
                        style="width:100%;background:#fff;border-radius:15px 15px 0 0;padding:20px 15px;box-sizing: border-box;min-height: calc(100% - 30vh);">
                    <div id="top">
                        <div class="allcenter" >
                            <p class="fz20 fb" style="color:#111;width:70%;">{{Detail.customization_data.name}}</p>
                            <div style="display: flex;justify-content: center;align-items: center;width:30%">
                                <img v-if="num>1" width="20px" src="./assets/sub.png" @click.stop="sub" alt="">
                                <img v-else width="23px" src="./assets/sub1.png" alt="">
                                <p style="margin:0 10px">{{num}}</p>
                                <img width="20px" src="./assets/xbk/add1.png" @click="add" alt="">
                            </div>
                        </div>
                        <div style="width:100%;height:1px;background:#e5e5e5;margin:15px 0"></div>
                        <p class="fz14" style="color:#666">{{Detail.customization_data.product_des}}</p>
                    </div>
                    <!--          style="overflow-y:scroll;" :style="{'height': height}"-->
                    <div>
                        <div style="margin-top:25px;" v-for="(item,index) in Detail.customization_data.specification_list">
                            <div  v-for="(items,indexs) in Detail.customization_data.customizations">
                                <div v-if="item==items.code">
                                    <p class="fz14 fb" v-if="items.extra_list.length>0" style="color:#111">{{items.name}}</p>
                                    <div v-if="items.display_type=='picture'">
                                        <div class="clear" style="margin-top:17px" v-if="items.code=='Cupsize'">
                                            <div class="fl pr" v-for="(a,aa) in items.extra_list"
                                                 :class="{active:(a.active)}" style="width:30%;border-radius:8px;padding-bottom:30%" :style="{margin:(aa==1?'0 5%':'0')}"
                                                 @click="changeMain(indexs,aa)">
                                                <div class="pa allcenter" style="width:100%;height:100%;top:0;left:0">
                                                    <div class="center">
                                                        <div v-if="a.code=='Tall'">
                                                            <img v-if="a.active" src="./assets/xbk/active-mediumCup.png" style="width:27px;" alt="">
                                                            <img v-else src="./assets/xbk/mediumCup.png" style="width:27px;" alt="">
                                                        </div>
                                                        <div  v-if="a.code=='Grande'">
                                                            <img v-if="a.active" src="./assets/xbk/active-bigCup.png" style="width:27px;" alt="">
                                                            <img v-else src="./assets/xbk/bigCup.png" style="width:27px;" alt="">
                                                        </div>
                                                        <div v-if="a.code=='Venti'">
                                                            <img v-if="a.active" src="./assets/xbk/active-venti.png" style="width:27px;" alt="">
                                                            <img v-else src="./assets/xbk/venti.png" style="width:27px;" alt="">
                                                        </div>
                                                        <p class="fz11" style="color:#B0B0B0;margin:4px 0 3.5px 0">{{a.name}}</p>
                                                        <span class="fz10" style="color:#999">{{a.description}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else-if="items.display_type=='text'">
                                        <div class="clear" style="margin-top:17px">
                                            <div class="fl allcenter"  v-for="(a,aa) in items.extra_list"  @click="changeMain(indexs,aa)"
                                                 :class="{active:(a.active)}" style="width:30%;border-radius:10px;"
                                                 :style="{'margin': ((aa+2)%3 == 0 ? '0 5% 17px 5%':'0 0 17px 0')}">
                                                <p class="fz11" style="color:#999;padding:10px 0">{{a.name}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else style="width:96%;margin:17px 2% 0 2%;border-radius:5px;padding:8px 8px;box-sizing: border-box;" :style="{'background': (e.num>0 ? '#03873e':'#e5e5e5')}" v-for="(e,ee) in items.extra_list"  @click="changeMain(indexs,ee)" class="justify-align">
                                        <p class="fz14" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.name}}</p>
                                        <div class="allcenter">
                                            <div  @click="sub1(items,indexs,e,ee)">
                                                <img src="./assets/xbk/sub.png" v-if="e.num>0" style="width:20px;" alt="">
                                                <img src="./assets/xbk/sub0.png" v-else style="width:20px;" alt="">
                                            </div>
                                            <p class="fz14" style="padding:0 4px" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.num + ' ' + e.unit}}</p>
                                            <div @click="add1(items,indexs,e,ee)">
                                                <img src="./assets/xbk/add.png" v-if="e.num>0" style="width:20px;" alt="">
                                                <img src="./assets/xbk/add0.png" v-else style="width:20px;" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top:25px;" v-for="(item,index) in Detail.customization_data.customizations">
                            <div v-if="item.parent_code==''&&item.is_fold!=1">
                                <div class="vertical-center" v-if="item.extra_list.length>0">
                                    <p class="fz14 fb"  style="color:#111">{{item.name}}</p>
                                    <div style="width:5px;height:5px;background:#ed171f;border-radius:50%;margin-left:5px" v-if="item.redcircle"></div>
                                </div>
                                <div class="clear" style="margin-top:17px" v-if="item.display_type=='text'">
                                    <div class="fl allcenter"  v-for="(a,aa) in item.extra_list"
                                         :class="{active:(a.active)}" style="width:30%;border-radius:10px;"
                                         @click="changeSecondary(item,a,index,aa)" :style="{'margin': ((aa+2)%3 == 0 ? '0 5% 17px 5%':'0 0 17px 0')}">
                                        <p class="fz11" style="color:#999;padding:10px 0">{{a.name}}</p>
                                    </div>
                                </div>
                                <div class="clear" style="margin-top:17px" v-else-if="item.display_type=='picture'">
                                    <div class="fl pr" v-for="(a,aa) in item.extra_list"
                                         :class="{active:(a.active)}" style="width:30%;border-radius:8px;padding-bottom:30%" :style="{margin:(aa==1?'0 5%':'0')}"
                                         @click="changeSecondary(item,a,index,aa)">
                                        <div class="pa allcenter" style="width:100%;height:100%;top:0;left:0">
                                            <div class="center">
                                                <img v-if="a.active" :src="'资源库地址，参见readme' + a.pic_name_selected" style="width:80%;" alt="">
                                                <img v-else :src="'资源库地址，参见readme' + a.pic_name" style="width:80%;" alt="">
                                                <p class="fz11" style="color:#B0B0B0;margin:4px 0 3.5px 0">{{a.name}}</p>
                                                <span class="fz10" style="color:#999">{{a.description}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else style="width:96%;margin:17px 2% 0 2%;border-radius:5px;padding:8px 8px;box-sizing: border-box;" :style="{'background': (e.num>0 ? '#03873e':'#e5e5e5')}" v-for="(e,ee) in item.extra_list" class="justify-align">
                                    <p class="fz14" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.name}}</p>
                                    <div class="allcenter">
                                        <div @click="sub1(item,index,e,ee)">
                                            <img src="./assets/xbk/sub.png" v-if="e.num>0" style="width:20px;" alt="">
                                            <img src="./assets/xbk/sub0.png" v-else style="width:20px;" alt="">
                                        </div>
                                        <p class="fz14" style="padding:0 4px" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.num + ' ' + e.unit}}</p>
                                        <div @click="add1(item,index,e,ee)">
                                            <img src="./assets/xbk/add.png" v-if="e.num>0" style="width:20px;" alt="">
                                            <img src="./assets/xbk/add0.png" v-else style="width:20px;" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div v-for="(a,aa) in item.extra_list">
                                    <div v-if="a.active">
                                        <div v-for="(b,bb) in Detail.customization_data.customizations">
                                            <div v-if="a.code==b.parent_code">
                                                <p class="fz12" style="color:#666">{{b.name}}</p>
                                                <div v-if="b.display_type=='picture'">
                                                    <div class="clear" style="margin:17px 0">
                                                        <div class="fl pr" v-for="(c,cc) in b.extra_list"
                                                             :class="{active:(c.active)}" style="width:30%;border-radius:8px;padding-bottom:30%" :style="{margin:(cc==1?'0 5%':'0')}"
                                                             @click="changeSecondary(b,c,bb,cc)">
                                                            <div class="pa allcenter" style="width:100%;height:100%;top:0;left:0">
                                                                <div class="center">
                                                                    <img v-if="c.active" :src="bindIcon(c.pic_name_selected)" style="width:80%;" alt="">
                                                                    <img v-else :src="bindIcon(c.pic_name)" style="width:80%;" alt="">
                                                                    <p class="fz11" style="color:#B0B0B0;margin:4px 0 3.5px 0">{{c.name}}</p>
                                                                    <span class="fz10" style="color:#999">{{c.description}}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-else-if="b.display_type=='text'">
                                                    <div class="clear" style="margin-top:17px">
                                                        <div class="fl allcenter"  v-for="(c,cc) in b.extra_list"
                                                             :class="{active:(c.active)}" style="width:30%;border-radius:10px;"
                                                             @click="changeSecondary(b,c,bb,cc)" :style="{'margin': ((cc+2)%3 == 0 ? '0 5% 17px 5%':'0 0 17px 0')}">
                                                            <p class="fz11" style="color:#999;padding:10px 0">{{c.name}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-else style="width:96%;margin:17px 2% 0 2%;border-radius:5px;padding:8px 8px;box-sizing: border-box;" :style="{'background': (e.num>0 ? '#03873e':'#e5e5e5')}" v-for="(e,ee) in b.extra_list" class="justify-align">
                                                    <p class="fz14" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.name}}</p>
                                                    <div class="allcenter">
                                                        <div @click="sub1(b,bb,e,ee)">
                                                            <img src="./assets/xbk/sub.png" v-if="e.num>0" style="width:20px;" alt="">
                                                            <img src="./assets/xbk/sub0.png" v-else style="width:20px;" alt="">
                                                        </div>
                                                        <p class="fz14" style="padding:0 4px" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.num + ' ' + e.unit}}</p>
                                                        <div  @click="add1(b,bb,e,ee)">
                                                            <img src="./assets/xbk/add.png" v-if="e.num>0" style="width:20px;" alt="">
                                                            <img src="./assets/xbk/add0.png" v-else style="width:20px;" alt="">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-for="(c,cc) in b.extra_list">
                                                    <div v-if="c.active">
                                                        <div  v-for="(d,dd) in Detail.customization_data.customizations">
                                                            <div v-if="c.code==d.parent_code">
                                                                <p class="fz12" style="color:#666">{{d.name}}</p>
                                                                <div v-if="d.display_type=='picture'">
                                                                    <div class="clear" style="margin:17px 0">
                                                                        <div class="fl pr" v-for="(e,ee) in d.extra_list"
                                                                             :class="{active:(e.active)}" style="width:30%;border-radius:8px;padding-bottom:30%" :style="{margin:(ee==1?'0 5%':'0')}"
                                                                             @click="changeSecondary(d,e,dd,ee)">
                                                                            <div class="pa allcenter" style="width:100%;height:100%;top:0;left:0">
                                                                                <div class="center">
                                                                                    <img v-if="e.active" :src="bindIcon(e.pic_name_selected)" style="width:80%;" alt="">
                                                                                    <img v-else :src="bindIcon(e.pic_name)" style="width:80%;" alt="">
                                                                                    <p class="fz11" style="color:#B0B0B0;margin:4px 0 3.5px 0">{{e.name}}</p>
                                                                                    <span class="fz10" style="color:#999">{{e.description}}</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div v-else-if="d.display_type=='text'">
                                                                    <div class="clear" style="margin-top:17px">
                                                                        <div class="fl allcenter"  v-for="(e,ee) in d.extra_list"
                                                                             :class="{active:(e.active)}" style="width:30%;border-radius:10px;"
                                                                             @click="changeSecondary(d,e,dd,ee)" :style="{'margin': ((ee+2)%3 == 0 ? '0 5% 17px 5%':'0 0 17px 0')}">
                                                                            <p class="fz11" style="color:#999;padding:10px 0">{{e.name}}</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div v-else style="width:96%;margin:17px 2% 0 2%;border-radius:5px;padding:8px 8px;box-sizing: border-box;" :style="{'background': (e.num>0 ? '#03873e':'#e5e5e5')}" v-for="(e,ee) in d.extra_list" class="justify-align">
                                                                    <p class="fz14" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.name}}</p>
                                                                    <div class="allcenter">
                                                                        <div  @click="sub1(d,dd,e,ee)">
                                                                            <img src="./assets/xbk/sub.png" v-if="e.num>0" style="width:20px;" alt="">
                                                                            <img src="./assets/xbk/sub0.png" v-else style="width:20px;" alt="">
                                                                        </div>
                                                                        <p class="fz14" style="padding:0 4px" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.num + ' ' + e.unit}}</p>
                                                                        <div  @click="add1(d,dd,e,ee)">
                                                                            <img src="./assets/xbk/add.png" v-if="e.num>0" style="width:20px;" alt="">
                                                                            <img src="./assets/xbk/add0.png" v-else style="width:20px;" alt="">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                                    <div style="margin-top:25px" v-if="rightvalue">
                                      <van-collapse class="fz15" v-model="activeNames" accordion>
                                        <van-collapse-item title="进阶选择" name="1">
                                          <div style="margin-top:25px;" v-for="(item,index) in Detail.customization_data.customizations">
                                            <div v-if="item.parent_code==''&&item.is_fold==1">
                                              <p class="fz14 fb" v-if="item.extra_list.length>0" style="color:#111">{{item.name}}</p>
                                              <div class="clear" style="margin-top:17px" v-if="item.display_type=='text'">
                                                <div class="fl allcenter"  v-for="(a,aa) in item.extra_list"
                                                     :class="{active:(a.active)}" style="width:30%;border-radius:10px;"
                                                     @click="changeSecondary(item,a,index,aa)" :style="{'margin': ((aa+2)%3 == 0 ? '0 5% 17px 5%':'0 0 17px 0')}">
                                                  <p class="fz11" style="color:#999;padding:10px 0">{{a.name}}</p>
                                                </div>
                                              </div>
                                              <div class="clear" style="margin-top:17px" v-else-if="item.display_type=='picture'">
                                                <div class="fl pr" v-for="(a,aa) in item.extra_list"
                                                     :class="{active:(a.active)}" style="width:30%;border-radius:8px;padding-bottom:30%" :style="{margin:(aa==1?'0 5%':'0')}"
                                                     @click="changeSecondary(item,a,index,aa)">
                                                  <div class="pa allcenter" style="width:100%;height:100%;top:0;left:0">
                                                    <div class="center">
                                  <img v-if="a.active" :src="bindIcon(a.pic_name_selected)" style="width:80%;" alt="">
                                  <img v-else :src="bindIcon(a.pic_name)" style="width:80%;" alt="">
                                                      <p class="fz11" style="color:#B0B0B0;margin:4px 0 3.5px 0">{{a.name}}</p>
                                                      <span class="fz10" style="color:#999">{{a.description}}</span>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                              <div v-else style="width:96%;margin:17px 2% 0 2%;border-radius:5px;padding:8px 8px;box-sizing: border-box;" :style="{'background': (e.num>0 ? '#03873e':'#e5e5e5')}" v-for="(e,ee) in item.extra_list" class="justify-align">
                                                <p class="fz14" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.name}}</p>
                                                <div class="allcenter" v-if="item.need_reset_specifications==1">
                                                  <div @click="sub1(item,index,e,ee)">
                                                    <img src="../../assets/xbk/sub.png" v-if="e.num>0" style="width:20px;" alt="">
                                                    <img src="../../assets/xbk/sub0.png" v-else style="width:20px;" alt="">
                                                  </div>
                                                  <p class="fz14" style="padding:0 4px" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.num + ' ' + e.unit}}</p>
                                                  <div @click="add1(item,index,e,ee)">
                                                    <img src="../../assets/xbk/add.png" v-if="e.num>0" style="width:20px;" alt="">
                                                    <img src="../../assets/xbk/add0.png" v-else style="width:20px;" alt="">
                                                  </div>
                                                </div>
                                                <div v-else class="allcenter">
                                                  <img src="../../assets/xbk/sub.png" @click="sub1(item,index,e,ee)" v-if="e.num>0" style="width:20px;" alt="">
                                                  <img src="../../assets/xbk/add0.png" @click="add1(item,index,e,ee)" v-else style="width:20px;" alt="">
                                                </div>
                                              </div>
                                              <div v-for="(a,aa) in item.extra_list">
                                                <div v-if="a.active">
                                                  <div v-for="(b,bb) in Detail.customization_data.customizations">
                                                    <div v-if="a.code==b.parent_code">
                                                      <p class="fz12" style="color:#666">{{b.name}}</p>
                                                      <div v-if="b.display_type=='picture'">
                                                        <div class="clear" style="margin:17px 0">
                                                          <div class="fl pr" v-for="(c,cc) in b.extra_list"
                                                               :class="{active:(c.active)}" style="width:30%;border-radius:8px;padding-bottom:30%" :style="{margin:(cc==1?'0 5%':'0')}"
                                                               @click="changeSecondary(b,c,bb,cc)">
                                                            <div class="pa allcenter" style="width:100%;height:100%;top:0;left:0">
                                                              <div class="center">
                                                                <p class="fz11" style="color:#B0B0B0;margin:4px 0 3.5px 0">{{c.name}}</p>
                                                                <span class="fz10" style="color:#999">{{c.description}}</span>
                                                              </div>
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div v-else-if="b.display_type=='text'">
                                                        <div class="clear" style="margin-top:17px">
                                                          <div class="fl allcenter"  v-for="(c,cc) in b.extra_list"
                                                               :class="{active:(c.active)}" style="width:30%;border-radius:10px;"
                                                               @click="changeSecondary(b,c,bb,cc)" :style="{'margin': ((cc+2)%3 == 0 ? '0 5% 17px 5%':'0 0 17px 0')}">
                                                            <p class="fz11" style="color:#999;padding:10px 0">{{c.name}}</p>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div v-else style="width:96%;margin:17px 2% 0 2%;border-radius:5px;padding:8px 8px;box-sizing: border-box;" :style="{'background': (e.num>0 ? '#03873e':'#e5e5e5')}" v-for="(e,ee) in b.extra_list" class="justify-align">
                                                        <p class="fz14" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.name}}</p>
                                                        <div class="allcenter" v-if="b.need_reset_specifications==1">
                                                          <div @click="sub1(b,bb,e,ee)">
                                                            <img src="../../assets/xbk/sub.png" v-if="e.num>0" style="width:20px;" alt="">
                                                            <img src="../../assets/xbk/sub0.png" v-else style="width:20px;" alt="">
                                                          </div>
                                                          <p class="fz14" style="padding:0 4px" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.num + ' ' + e.unit}}</p>
                                                          <div @click="add1(b,bb,e,ee)">
                                                            <img src="../../assets/xbk/add.png" v-if="e.num>0" style="width:20px;" alt="">
                                                            <img src="../../assets/xbk/add0.png" v-else style="width:20px;" alt="">
                                                          </div>
                                                        </div>
                                                        <div v-else class="allcenter">
                                                          <img src="../../assets/xbk/sub.png" @click="sub1(b,bb,e,ee)" v-if="e.num>0" style="width:20px;" alt="">
                                                          <img src="../../assets/xbk/add0.png" @click="add1(b,bb,e,ee)" v-else style="width:20px;" alt="">
                                                        </div>
                                                      </div>
                                                      <div v-for="(c,cc) in b.extra_list">
                                                        <div v-if="c.active">
                                                          <div  v-for="(d,dd) in Detail.customization_data.customizations">
                                                            <div v-if="c.code==d.parent_code">
                                                              <p class="fz12" style="color:#666">{{d.name}}</p>
                                                              <div v-if="d.display_type=='picture'">
                                                                <div class="clear" style="margin:17px 0">
                                                                  <div class="fl pr" v-for="(e,ee) in d.extra_list"
                                                                       :class="{active:(e.active)}" style="width:30%;border-radius:8px;padding-bottom:30%" :style="{margin:(ee==1?'0 5%':'0')}"
                                                                       @click="changeSecondary(d,e,dd,ee)">
                                                                    <div class="pa allcenter" style="width:100%;height:100%;top:0;left:0">
                                                                      <div class="center">
                                                                        <p class="fz11" style="color:#B0B0B0;margin:4px 0 3.5px 0">{{e.name}}</p>
                                                                        <span class="fz10" style="color:#999">{{e.description}}</span>
                                                                      </div>
                                                                    </div>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                              <div v-else-if="d.display_type=='text'">
                                                                <div class="clear" style="margin-top:17px">
                                                                  <div class="fl allcenter"  v-for="(e,ee) in d.extra_list"
                                                                       :class="{active:(e.active)}" style="width:30%;border-radius:10px;"
                                                                       @click="changeSecondary(d,e,dd,ee)" :style="{'margin': ((ee+2)%3 == 0 ? '0 5% 17px 5%':'0 0 17px 0')}">
                                                                    <p class="fz11" style="color:#999;padding:10px 0">{{e.name}}</p>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                              <div v-else style="width:96%;margin:17px 2% 0 2%;border-radius:5px;padding:8px 8px;box-sizing: border-box;" :style="{'background': (e.num>0 ? '#03873e':'#e5e5e5')}" v-for="(e,ee) in d.extra_list" class="justify-align">
                                                                <p class="fz14" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.name}}</p>
                                                                <div class="allcenter" v-if="d.need_reset_specifications==1">
                                                                  <div @click="sub1(d,dd,e,ee)">
                                                                    <img src="../../assets/xbk/sub.png" v-if="e.num>0" style="width:20px;" alt="">
                                                                    <img src="../../assets/xbk/sub0.png" v-else style="width:20px;" alt="">
                                                                  </div>
                                                                  <p class="fz14" style="padding:0 4px" :style="{'color': (e.num>0 ? '#fff':'#666')}">{{e.num + ' ' + e.unit}}</p>
                                                                  <div @click="add1(d,dd,e,ee)">
                                                                    <img src="../../assets/xbk/add.png" v-if="e.num>0" style="width:20px;" alt="">
                                                                    <img src="../../assets/xbk/add0.png" v-else style="width:20px;" alt="">
                                                                  </div>
                                                                </div>
                                                                <div v-else class="allcenter">
                                                                  <img src="../../assets/xbk/sub.png" @click="sub1(d,dd,e,ee)" v-if="e.num>0" style="width:20px;" alt="">
                                                                  <img src="../../assets/xbk/add0.png" @click="add1(d,dd,e,ee)" v-else style="width:20px;" alt="">
                                                                </div>
                                                              </div>
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </van-collapse-item>
                                      </van-collapse>
                                    </div>
                        <div style="height:50px;width:100%"></div>
                    </div>
                </div>
            </div>
            <div style="width:100%;height:70px;padding:0 15px;bottom:0;left:0;position: fixed;box-sizing: border-box;background:#fff"
                 class="allcenter">
                <div style="width:100%;max-width:414px;" class="allcenter">
                    <div style="width:30%;height:37px;border-radius:18.5px;border:1px solid #03873E;" class="allcenter"
                         @click="recovery"><p class="fz14 fb" style="color:#03873E">恢复默认</p></div>
                    <div style="width:65%;height:37px;border-radius:18px;margin-left:5%;background:#03873E" class="allcenter" @click="buy"><p
                            class="fz14" style="color:#fff"><span class="fz10">￥</span><span class="fz18 fb" style="padding:0 2.5px 0 4px">{{total}}</span><span class="fz12" style="color:#fff;text-decoration:line-through">{{pricetotal}}</span><span
                            class="fb ml5">加入购物车</span></p></div>
                </div>
            </div>
        </div>

    </div>
    <!-- 过渡加载动画 -->
<div class="mask-loading" v-if="isShow2">
    <div class='box tac'>
        <img style="width:80%;height:auto;margin: auto" src="./assets/preloader.gif" alt="">
    </div>
</div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                timer: '',
                Detail: [],
                oldDetail: [],
                num: 1,
                total: 0,
                solo: 0,
                pricesolo: 0,
                pricetotal: 0,
                height: '',
                defaultRule: [],
                defaultModel: '',
                price_times: [],
                rule: [],
                skuId: '',
                rulenum: 0,
                TemperatureCode: '',
                scrollflag: false,
                distributorCode: '',
                id:'',
                specialPrcie:0,
                isShow:false,
                isShow2:true,
                rightvalue:false,
                activeNames:'',
            }
        },
        components: {},
        created: function () {
            // 产品id  店铺id  skuid
            // let si = this.getUrlKey('si', window.location.href)
            // let pi = this.getUrlKey('pi', window.location.href)
            
            //mock
            let si = '18685'
            let pi = '203259870912184855'

            this.getDetail(pi, si, '')
        },
        mounted: function () {
            this.$nextTick(() => {
                window.addEventListener("scroll", this.handleScroll); // 监听（绑定）滚轮滚动事件
            });

        },
        beforeDestroy() {
            window.removeEventListener("scroll", this.handleScroll);
        },
        methods: {
            getUrlKey: function (name, url) {
            // eslint-disable-next-line no-sparse-arrays
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ''])[1].replace(/\+/g, '%20')) || null
            },
            handleScroll() {
                var height = document.body.offsetHeight * 0.3
                let scrollTop = document.getElementById('bod').scrollTop || document.getElementById('bod').scrollTop;// 滚动条偏移量
                if (scrollTop > height) this.scrollflag = true
                else this.scrollflag = false
            },
            bindIcon(a) {
                return "资源库地址，参见readme" + a
            },
            changeMain(oneIndex, twoIndex) {
                var that=this;if(that['Detail']['customization_data']['customizations'][oneIndex]['name']=='杯型')that['Detail']=JSON['parse'](that['oldDetail']);that['defaultModel']=[];that['Detail']['customization_data']['customizations'][oneIndex]['extra_list']['forEach'](function(_0x40dcc9,_0xddfbd){if(_0xddfbd==twoIndex)_0x40dcc9['active']=!![];else _0x40dcc9['active']=![];that['$set'](that['Detail']['customization_data']['customizations'][oneIndex]['extra_list'],_0xddfbd,_0x40dcc9);});that['Detail']['customization_data']['customizations']['forEach'](function(_0x367f02,_0x14f63a){_0x367f02['extra_list']['forEach'](function(_0x37e81e,_0xdfa3){if(_0x367f02['name']=='杯型'&&_0x37e81e['active'])that['defaultModel']=_0x37e81e['code']+'_';if(that['defaultModel']&&_0x37e81e['active']&&_0x367f02['name']=='温度'){that['TemperatureCode']=_0x37e81e['code'];if(_0x37e81e['name']['indexOf']('热')!=-(0xf2e63^0xf2e62)){that['defaultModel']=that['defaultModel']+'Hot';}else{that['defaultModel']=that['defaultModel']+'Cold';}}});});for(var item in that['Detail']['coffee_sku_mapping']){if(item==that['defaultModel']){that['Detail']['rules']['forEach'](function(_0x39808d,_0x1c2e61){if(that['Detail']['coffee_sku_mapping'][item]['sku_id']==_0x39808d['code']){that['skuId']=_0x39808d['code'];that['defaultRule']=_0x39808d['rules'];that['solo']=that['Detail']['coffee_sku_mapping'][item]['salePrice'];that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['Detail']['coffee_sku_mapping'][item]['price'];that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);}});}}that['Detail']['customization_data']['customizations']['forEach'](function(_0x391fec,_0x47b137){_0x391fec['extra_list']['forEach'](function(_0xa4413d,_0x148526){if(_0x391fec['parent_code']==''&&(_0xa4413d['active']||_0x391fec['display_type']=='bar')&&_0x391fec['is_fold']==(0xbd5a3^0xbd5a3)){if(_0x391fec['display_type']!='bar'){that['Detail']['customization_data']['customizations']['forEach'](function(_0x2b4dbe,_0x109a06){_0x2b4dbe['extra_list']['forEach'](function(_0x5da712,_0x559bff){if(_0x2b4dbe['parent_code']==_0xa4413d['code']&&(_0x5da712['active']||_0x2b4dbe['display_type']=='bar')&&_0x2b4dbe['is_fold']==(0x2f38b^0x2f38b)){if(_0x2b4dbe['display_type']=='bar'){that['godefaultrule'](_0x109a06,_0x559bff,_0x5da712['code'],0xda38f^0xda38e);}else{that['Detail']['customization_data']['customizations']['forEach'](function(_0x475c1d,_0x598277){if(_0x475c1d['parent_code']==_0x5da712['code']&&_0x475c1d['is_fold']==(0x827e9^0x827e9)){_0x475c1d['extra_list']['forEach'](function(_0x14adf2,_0x29094d){if(_0x475c1d['display_type']=='bar'){that['godefaultrule'](_0x598277,_0x29094d,_0x14adf2['code'],0xb59e3^0xb59e2);}});}});}}});});}else if(_0x391fec['is_fold']==(0x6e04d^0x6e04d)){that['Detail']['customization_data']['customizations']['forEach'](function(_0x15e56c,_0x1ec5a9){_0x15e56c['extra_list']['forEach'](function(_0x7da274,_0x5b2ee0){that['godefaultrule'](_0x1ec5a9,_0x5b2ee0,_0x7da274['code'],0x8bfbc^0x8bfbd);});});}}});});
                },
            changeSecondary(item, items, index, indexs) {
                var that=this;var price='',price1='';if(item['must']==(0x8e01c^0x8e01d)||item['parent_code']!=''){if(items['active'])return;item['extra_list']['forEach'](function(_0x1e6313,_0x231cbe){if(_0x1e6313['active']){that['solo']=that['accAdd'](that['solo'],that['accSub'](items['price'],_0x1e6313['price']));that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['accAdd'](that['pricesolo'],that['accSub'](items['price'],_0x1e6313['price']));that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);_0x1e6313['active']=![];that['$set'](that['Detail']['customization_data']['customizations'][index]['extra_list'],_0x231cbe,that['Detail']['customization_data']['customizations'][index]['extra_list'][_0x231cbe]);that['Detail']['customization_data']['customizations']['forEach'](function(_0xbe9b94,_0x1e1c09){if(_0x1e6313['code']==_0xbe9b94['parent_code']){if(_0xbe9b94['extra_list']['length']==(0x219ea^0x219ea)){that['solo']=that['accSub'](that['solo'],that['specialPrcie']);that['pricesolo']=that['accSub'](that['pricesolo'],that['specialPrcie']);that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);}_0xbe9b94['extra_list']['forEach'](function(_0x2293db,_0x405f44){that['getPricerule'](_0x2293db['code']);if(_0xbe9b94['display_type']=='bar'){that['solo']=that['accSub'](that['solo'],that['accMul'](_0x2293db['price'],that['price_times'][_0x2293db['num']]));that['pricesolo']=that['accSub'](that['pricesolo'],that['accMul'](_0x2293db['price'],that['price_times'][_0x2293db['num']]));}else if(_0x2293db['active']){that['solo']=that['accSub'](that['solo'],_0x2293db['price']);that['pricesolo']=that['accSub'](that['pricesolo'],_0x2293db['price']);}that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);that['Detail']['customization_data']['customizations']['forEach'](function(_0xf49062,_0x414df6){if(_0x414df6==(0x46695^0x46695)){that['getPricerule'](_0xf49062['extra_list'][0x23eac^0x23eac]['code']);that['specialPrcie']=that['accMul'](_0xf49062['extra_list'][0x70431^0x70431]['price'],that['price_times'][that['rulenum']]);}if(_0x2293db['code']==_0xf49062['parent_code']&&_0x2293db['active']){_0xf49062['extra_list']['forEach'](function(_0x30ca86,_0x31b79e){that['getPricerule'](_0x30ca86['code']);if(_0xf49062['display_type']=='bar'){that['solo']=that['accSub'](that['solo'],that['accMul'](_0x30ca86['price'],that['price_times'][_0x30ca86['num']]));that['pricesolo']=that['accSub'](that['pricesolo'],that['accMul'](_0x30ca86['price'],that['price_times'][_0x30ca86['num']]));}else if(_0x30ca86['active']){that['solo']=that['accSub'](that['solo'],_0x30ca86['price']);that['pricesolo']=that['accSub'](that['pricesolo'],_0x30ca86['price']);}that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);});}});});}});}});items['active']=!![];that['Detail']['customization_data']['customizations']['forEach'](function(_0x5ebe37,_0x1cd62a){if(items['code']==_0x5ebe37['parent_code']){if(_0x5ebe37['extra_list']['length']==(0x91660^0x91660)){that['solo']=that['accAdd'](that['solo'],that['specialPrcie']);that['pricesolo']=that['accAdd'](that['pricesolo'],that['specialPrcie']);that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);}_0x5ebe37['extra_list']['forEach'](function(_0x117601,_0x2fe14c){that['getPricerule'](_0x117601['code']);if(_0x5ebe37['display_type']=='bar'){_0x117601['num']=that['rulenum'];that['solo']=that['accAdd'](that['solo'],that['accMul'](_0x117601['price'],that['price_times'][_0x117601['num']]));that['pricesolo']=that['accAdd'](that['pricesolo'],that['accMul'](_0x117601['price'],that['price_times'][_0x117601['num']]));}else if(_0x117601['active']){that['solo']=that['accSub'](that['solo'],_0x117601['price']);that['pricesolo']=that['accSub'](that['pricesolo'],_0x117601['price']);}that['$set'](that['Detail']['customization_data']['customizations'][_0x1cd62a]['extra_list'],_0x2fe14c,that['Detail']['customization_data']['customizations'][_0x1cd62a]['extra_list'][_0x2fe14c]);that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);that['Detail']['customization_data']['customizations']['forEach'](function(_0x19148e,_0x47a02c){if(_0x117601['code']==_0x19148e['parent_code']&&_0x117601['active']){_0x19148e['extra_list']['forEach'](function(_0x4ca021,_0x49fef3){that['getPricerule'](_0x4ca021['code']);if(_0x19148e['display_type']=='bar'){console['log'](_0x19148e);_0x4ca021['num']=that['rulenum'];that['solo']=that['accAdd'](that['solo'],that['accMul'](_0x4ca021['price'],that['price_times'][_0x4ca021['num']]));that['pricesolo']=that['accAdd'](that['pricesolo'],that['accMul'](_0x4ca021['price'],that['price_times'][_0x4ca021['num']]));}else if(_0x4ca021['active']){that['solo']=that['accSub'](that['solo'],_0x4ca021['price']);that['pricesolo']=that['accSub'](that['pricesolo'],_0x4ca021['price']);}that['$set'](that['Detail']['customization_data']['customizations'][_0x47a02c]['extra_list'],_0x49fef3,that['Detail']['customization_data']['customizations'][_0x47a02c]['extra_list'][_0x49fef3]);that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);});}});});}});that['$set'](that['Detail']['customization_data']['customizations'][index]['extra_list'],indexs,that['Detail']['customization_data']['customizations'][index]['extra_list'][indexs]);that['Detail']['customization_data']['customizations']['forEach'](function(_0x4d2415,_0x50f95e){if(_0x4d2415['name']==item['name']){_0x4d2415['extra_list']['forEach'](function(_0x35b429,_0x5993d2){if(_0x35b429['name']==items['name']){_0x35b429['active']=items['active'];that['$set'](that['Detail']['customization_data']['customizations'][_0x50f95e]['extra_list'],_0x5993d2,_0x35b429);}else{_0x35b429['active']=![];that['$set'](that['Detail']['customization_data']['customizations'][_0x50f95e]['extra_list'],_0x5993d2,_0x35b429);}});}});}else{if(!items['active']){item['extra_list']['forEach'](function(_0x14d83f,_0x26b462){if(_0x14d83f['active']){that['solo']=that['accAdd'](that['solo'],that['accSub'](items['price'],_0x14d83f['price']));that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['accAdd'](that['pricesolo'],that['accSub'](items['price'],_0x14d83f['price']));that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);_0x14d83f['active']=![];that['$set'](that['Detail']['customization_data']['customizations'][index]['extra_list'],_0x26b462,that['Detail']['customization_data']['customizations'][index]['extra_list'][_0x26b462]);that['Detail']['customization_data']['customizations']['forEach'](function(_0x11ded2,_0x202c95){if(_0x14d83f['code']==_0x11ded2['parent_code']){if(_0x11ded2['extra_list']['length']==(0x75f77^0x75f77)){that['solo']=that['accSub'](that['solo'],that['specialPrcie']);that['pricesolo']=that['accSub'](that['pricesolo'],that['specialPrcie']);that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);}_0x11ded2['extra_list']['forEach'](function(_0x448895,_0xf19653){that['getPricerule'](_0x448895['code']);if(_0x11ded2['display_type']=='bar'){that['solo']=that['accSub'](that['solo'],that['accMul'](_0x448895['price'],that['price_times'][_0x448895['num']]));that['pricesolo']=that['accSub'](that['pricesolo'],that['accMul'](_0x448895['price'],that['price_times'][_0x448895['num']]));}else if(_0x448895['active']){that['solo']=that['accSub'](that['solo'],_0x448895['price']);that['pricesolo']=that['accSub'](that['pricesolo'],_0x448895['price']);}that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);that['Detail']['customization_data']['customizations']['forEach'](function(_0x1cbc6d,_0x14cc3c){if(_0x14cc3c==(0xef5bf^0xef5bf)){that['getPricerule'](_0x1cbc6d['extra_list'][0xbbb96^0xbbb96]['code']);that['specialPrcie']=that['accMul'](_0x1cbc6d['extra_list'][0x3b0f4^0x3b0f4]['price'],that['price_times'][that['rulenum']]);}if(_0x448895['code']==_0x1cbc6d['parent_code']&&_0x448895['active']){_0x1cbc6d['extra_list']['forEach'](function(_0x5d6102,_0x2fcf12){that['getPricerule'](_0x5d6102['code']);if(_0x1cbc6d['display_type']=='bar'){that['solo']=that['accSub'](that['solo'],that['accMul'](_0x5d6102['price'],that['price_times'][_0x5d6102['num']]));that['pricesolo']=that['accSub'](that['pricesolo'],that['accMul'](_0x5d6102['price'],that['price_times'][_0x5d6102['num']]));}else if(_0x5d6102['active']){that['solo']=that['accSub'](that['solo'],_0x5d6102['price']);that['pricesolo']=that['accSub'](that['pricesolo'],_0x5d6102['price']);}that['total']=that['accMul'](that['solo'],that['num']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);});}});});}});}});}if(items['active']){that['solo']=that['accSub'](that['solo'],items['price']);that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['accSub'](that['pricesolo'],items['price']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);items['active']=!items['active'];console['log'](items['active']);that['$set'](that['Detail']['customization_data']['customizations'][index]['extra_list'],indexs,that['Detail']['customization_data']['customizations'][index]['extra_list'][indexs]);}else{that['solo']=that['accAdd'](that['solo'],items['price']);that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['accAdd'](that['pricesolo'],items['price']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);items['active']=!items['active'];that['$set'](that['Detail']['customization_data']['customizations'][index]['extra_list'],indexs,that['Detail']['customization_data']['customizations'][index]['extra_list'][indexs]);}}
                },
            getPricerule(code) {
                var that=this;that['defaultRule']['forEach'](function(_0x3fd9ad,_0x4703aa){_0x3fd9ad['group_detail_rules']['forEach'](function(_0x35964b,_0x478469){if(code==_0x35964b['group_detail_code']){console['log'](_0x35964b);that['rulenum']=_0x35964b['default_count'];that['price_times']=_0x35964b['price_times'];}});});
                },
            add1(item, index, items, indexs) {
                var that=this;that['defaultRule']['forEach'](function(_0xe78437,_0xa24e75){_0xe78437['group_detail_rules']['forEach'](function(_0x306b0f,_0x568ba6){if(items['code']==_0x306b0f['group_detail_code']){that['rule']=_0xe78437;var _0x438920=0x0;item['extra_list']['forEach'](function(_0x27b5e5,_0x2a8598){_0x438920=_0x438920+_0x27b5e5['num'];});_0x438920=_0x438920+0x1;var _0x5bd564=items['num']+0x1;if(_0x438920<=that['rule']['group_max_number']&&_0x5bd564<=_0x306b0f['max_number']){that['solo']=that['accSub'](that['solo'],that['accSub'](that['accMul'](items['price'],_0x306b0f['price_times'][items['num']]),that['accMul'](items['price'],_0x306b0f['price_times'][_0x5bd564])));that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['accSub'](that['pricesolo'],that['accSub'](that['accMul'](items['price'],_0x306b0f['price_times'][items['num']]),that['accMul'](items['price'],_0x306b0f['price_times'][_0x5bd564])));that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);that['specialPrcie']=that['accMul'](items['price'],_0x306b0f['price_times'][_0x306b0f['default_count']]);items['num']=_0x5bd564;that['$set'](that['Detail']['customization_data']['customizations'][index]['extra_list'],indexs,items);}else return;}});});
            },
            sub1(item, index, items, indexs) {
                var that=this;that['defaultRule']['forEach'](function(_0x49ecc2,_0x440038){_0x49ecc2['group_detail_rules']['forEach'](function(_0x370565,_0xd55f54){if(items['code']==_0x370565['group_detail_code']){that['rule']=_0x49ecc2;var _0x5d6af1=0x0;item['extra_list']['forEach'](function(_0x7243ac,_0x3555d4){_0x5d6af1=_0x5d6af1+_0x7243ac['num'];});_0x5d6af1=_0x5d6af1-0x1;var _0x165380=items['num']-0x1;if(_0x5d6af1>=that['rule']['group_min_number']&&_0x165380>=_0x370565['min_number']){if(_0x370565['default_count']>0x0&&_0x370565['is_default']==0x1&&_0x165380==0x0){_0x370565['price_times'][0x0]=_0x370565['price_times'][_0x370565['default_count']];}that['solo']=that['accSub'](that['solo'],that['accSub'](that['accMul'](items['price'],_0x370565['price_times'][items['num']]),that['accMul'](items['price'],_0x370565['price_times'][_0x165380])));that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['accSub'](that['pricesolo'],that['accSub'](that['accMul'](items['price'],_0x370565['price_times'][items['num']]),that['accMul'](items['price'],_0x370565['price_times'][_0x165380])));that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);that['specialPrcie']=that['accMul'](items['price'],_0x370565['price_times'][_0x370565['default_count']]);items['num']=_0x165380;that['$set'](that['Detail']['customization_data']['customizations'][index]['extra_list'],indexs,items);}else return;}});});
            },
            godefaultrule(index1, index2, code, flag) {
                var that=this;that['defaultRule']['forEach'](function(_0x3c70b6,_0x26467d){_0x3c70b6['group_detail_rules']['forEach'](function(_0x4cc80c,_0x3f2e45){if(code==_0x4cc80c['group_detail_code']){if(_0x4cc80c['is_default']==(0x89d44^0x89d45)||_0x4cc80c['must']==(0x6163c^0x6163d)){that['Detail']['customization_data']['customizations'][index1]['extra_list'][index2]['num']=_0x4cc80c['default_count'];that['$set'](that['Detail']['customization_data']['customizations'][index1]['extra_list'],index2,that['Detail']['customization_data']['customizations'][index1]['extra_list'][index2]);}else{that['Detail']['customization_data']['customizations'][index1]['extra_list'][index2]['num']=0x73655^0x73655;that['$set'](that['Detail']['customization_data']['customizations'][index1]['extra_list'],index2,that['Detail']['customization_data']['customizations'][index1]['extra_list'][index2]);}that['price_times']=_0x4cc80c['price_times'];}});});
                },
            sub() {
                this.num = this.num - 1
                this.total = this.accMul(this.solo, this.num)
                this.pricetotal = this.accMul(this.pricesolo, this.num)
            },
            add() {
                this.num = this.num + 1
                this.total = this.accMul(this.solo, this.num)
                this.pricetotal = this.accMul(this.pricesolo, this.num)
            },
            //恢复默认
            recovery() {
               var that=this;that['Detail']=JSON['parse'](that['oldDetail']);that['Detail']['customization_data']['customizations']['forEach'](function(_0x21307d,_0x3b1767){_0x21307d['extra_list']['forEach'](function(_0x22ae24,_0x53649d){that['$set'](that['Detail']['customization_data']['customizations'][_0x3b1767]['extra_list'],_0x53649d,that['Detail']['customization_data']['customizations'][_0x3b1767]['extra_list'][_0x53649d]);});});that['num']=0xc53f3^0xc53f2;that['solo']=that['Detail']['customization_data']['salePrice'];that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['Detail']['customization_data']['price'];that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);            },
            getDetail(pi, si, skuId) {
                //调用获取详情接口整个赋值给Detail
                var time = new Date().getTime();
                this.pi=pi
                this.si=si
                var that = this
                //post请求

                // axios.post("", { brand_id: 10, si: this.si !== '' ? this.si : 0, pi: this.pi !== '' ? this.pi : 0})
                axios.get('./js/mock.json') //mock
                .then((response) => {
                    console.log('--->>>si', this.si)
                    console.log('--->>>pi', this.pi)
                    console.log('数据response------>>>>', response.data)
                    if (response.data.code !== 1) {
                        alert(response.data.msg + ',请重新进入!')
                        // this.$router.go(-1)
                    }
                    that.Detail=response.data.data;
                // 显示数据
                this.isShow = true
                this.isShow2 = false
            
                var DelectRule=[];if(skuId){var list;for(var item in that['Detail']['coffee_sku_mapping']){if(that['Detail']['coffee_sku_mapping'][item]['sku_id']==skuId){list=that['Detail']['coffee_sku_mapping'][item]['key']['split']('_');that['solo']=that['accAdd'](that['solo'],that['Detail']['coffee_sku_mapping'][item]['salePrice']);that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['accAdd'](that['pricesolo'],that['Detail']['coffee_sku_mapping'][item]['price']);that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);}}console['log'](list);that['Detail']['customization_data']['specification_list']['forEach'](function(_0x1085f1,_0x520662){that['Detail']['customization_data']['customizations']['forEach'](function(_0x3b6829,_0x114e24){if(_0x1085f1==_0x3b6829['code']){_0x3b6829['extra_list']['forEach'](function(_0x3b0b72,_0x118c3a){list['forEach'](function(_0xd168f,_0x2d6210){if(_0x2d6210==_0x520662){if(_0x3b0b72['code']==_0xd168f){_0x3b0b72['is_default']=0x1bff4^0x1bff5;}else{_0x3b0b72['is_default']=0xe6dd3^0xe6dd3;}}});});console['log'](_0x3b6829['extra_list']);}});});}that['defaultModel']='';that['Detail']['customization_data']['customizations']['forEach'](function(_0x54962f,_0x544608){_0x54962f['extra_list']['forEach'](function(_0x46222a,_0x11f17e){if(_0x46222a['count_filter']&&_0x46222a['is_default']==(0x63327^0x63326))_0x46222a['num']=_0x46222a['count_filter'];else _0x46222a['num']=0xb6f9a^0xb6f9a;if(_0x46222a['is_default']==(0x42e9f^0x42e9e)&&_0x54962f['display_type']!='bar')_0x46222a['active']=!![];else _0x46222a['active']=![];if(_0x54962f['name']=='杯型'&&_0x46222a['active'])that['defaultModel']=_0x46222a['code']+'_';if(that['defaultModel']&&_0x46222a['active']&&_0x54962f['name']=='温度'){that['TemperatureCode']=_0x46222a['code'];that['defaultModel']=that['defaultModel']+_0x46222a['code'];}});});console['log'](that['Detail']['customization_data']['customizations']);that['Detail']['customization_data']['customizations']['forEach'](function(_0x227598,_0x27393f){var _0x253a3f=[];_0x227598['active_default']=-(0x79ad5^0x79ad4);_0x227598['extra_list']['forEach'](function(_0x3aed16,_0x39060a){if(_0x3aed16['status']==(0x5e1af^0x5e1ad)){if(_0x227598['is_fold']==(0xae58b^0xae58a)){that['rightvalue']=!![];}if(_0x3aed16['is_default']==(0x3eabf^0x3eabe))_0x227598['active_default']=_0x39060a;_0x253a3f['push'](that['Detail']['customization_data']['customizations'][_0x27393f]['extra_list'][_0x39060a]);}if(_0x39060a==_0x227598['extra_list']['length']-(0xd7462^0xd7463)&&_0x227598['active_default']==-0x1&&_0x227598['must']==(0x6bd3b^0x6bd3a)){_0x227598['redcircle']=!![];console['log'](_0x227598);}});that['Detail']['customization_data']['customizations'][_0x27393f]['extra_list']=_0x253a3f;});console['log'](that['Detail']['customization_data']['customizations']);for(var item in that['Detail']['coffee_sku_mapping']){if(item==that['defaultModel']){that['Detail']['rules']['forEach'](function(_0x5329ba,_0x76f852){if(that['Detail']['coffee_sku_mapping'][item]['sku_id']==_0x5329ba['code']){that['skuId']=_0x5329ba['code'];that['defaultRule']=_0x5329ba['rules'];}});}}that['Detail']['customization_data']['customizations']['forEach'](function(_0x431029,_0x7451f7){_0x431029['extra_list']['forEach'](function(_0x719655,_0x5c4171){if(_0x431029['parent_code']==''&&(_0x719655['active']||_0x431029['display_type']=='bar')&&_0x431029['is_fold']==(0x65f30^0x65f30)){if(_0x431029['display_type']!='bar'){that['Detail']['customization_data']['customizations']['forEach'](function(_0x740038,_0x45d85d){_0x740038['extra_list']['forEach'](function(_0x2186fe,_0x566b39){if(_0x740038['parent_code']==_0x719655['code']&&(_0x2186fe['active']||_0x740038['display_type']=='bar')&&_0x740038['is_fold']==(0xd746f^0xd746f)){if(_0x740038['display_type']=='bar'){that['godefaultrule'](_0x45d85d,_0x566b39,_0x2186fe['code'],0xe52b9^0xe52b9);}else{that['Detail']['customization_data']['customizations']['forEach'](function(_0x5cff7c,_0x206834){if(_0x5cff7c['parent_code']==_0x2186fe['code']&&_0x5cff7c['is_fold']==0x0){_0x5cff7c['extra_list']['forEach'](function(_0xf8c6b1,_0x5946c9){if(_0x5cff7c['display_type']=='bar'){that['godefaultrule'](_0x206834,_0x5946c9,_0xf8c6b1['code'],0x0);}});}});}}});});}else if(_0x431029['is_fold']==(0x2f033^0x2f033)){that['Detail']['customization_data']['customizations']['forEach'](function(_0x246408,_0x205046){_0x246408['extra_list']['forEach'](function(_0x3d6138,_0x3f377c){that['godefaultrule'](_0x205046,_0x3f377c,_0x3d6138['code']);});});}}});});that['Detail']['customization_data']['customizations']['forEach'](function(_0x25f7c3,_0x21d589){_0x25f7c3['extra_list']['forEach'](function(_0x2fc2a8,_0x547599){if(_0x2fc2a8['is_default']==(0xb7a75^0xb7a74)){that['Detail']['customization_data']['customizations']['forEach'](function(_0x185cf7,_0x30044d){if(_0x185cf7['name']==_0x25f7c3['name']){_0x185cf7['extra_list']['forEach'](function(_0x5154ab,_0x595ff1){if(_0x5154ab['name']==_0x2fc2a8['name']){_0x5154ab['active']=_0x2fc2a8['active'];_0x5154ab['num']=_0x2fc2a8['num'];that['$set'](that['Detail']['customization_data']['customizations'][_0x30044d]['extra_list'],_0x595ff1,_0x5154ab);}});}});}});});if(skuId){that['Detail']['customization_data']['price']=that['pricesolo'];that['Detail']['customization_data']['salePrice']=that['solo'];}else{that['solo']=that['Detail']['customization_data']['salePrice'];that['total']=that['accMul'](that['solo'],that['num']);that['pricesolo']=that['Detail']['customization_data']['price'];that['pricetotal']=that['accMul'](that['pricesolo'],that['num']);}console['log'](that['Detail']);that['oldDetail']=JSON['stringify'](that['Detail']);that['timer']=setInterval(that['gettop'],0xca504^0xca536);
            })
            },
            gettop() {
                var that = this
                if (document.getElementById('top')) {
                    clearInterval(this.timer);
                    that.height = (document.body.offsetHeight - 70) - document.getElementById('top').offsetHeight + 'px'
                }
            },
            buy() {
                var that=this;var flag=![];var title;var goods={};goods['num']=that['num'];goods['goodName']=that['Detail']['customization_data']['name'];goods['goodId']=that['id'];goods['skuId']=that['skuId'];goods['sale']=that['solo'];goods['goodImg']=that['Detail']['customization_data']['default_image'];goods['listname']='';goods['original']=that['pricesolo'];goods['addExtra']=[];try{that['Detail']['customization_data']['customizations']['forEach'](function(_0xdc6138,_0x30f75b){var _0x45391f=![];_0xdc6138['extra_list']['forEach'](function(_0x13cb86,_0x1da7cf){if(_0xdc6138['redcircle']&&_0xdc6138['parent_code']==''){if(_0xdc6138['display_type']=='bar'){if(_0x13cb86['num']>(0xb06ad^0xb06ad))_0x45391f=!![];if(_0x1da7cf==_0xdc6138['extra_list']['length']-(0x93dbb^0x93dba)&&!_0x45391f){flag=!![];title=_0xdc6138['name'];throw Error();}}else{if(_0x13cb86['active'])_0x45391f=!![];if(_0x1da7cf==_0xdc6138['extra_list']['length']-(0xa126c^0xa126d)&&!_0x45391f){flag=!![];title=_0xdc6138['name'];throw Error();}}}if(_0xdc6138['parent_code']==''&&(_0x13cb86['active']||_0xdc6138['display_type']=='bar'&&_0x13cb86['num']>(0x47a19^0x47a19))){goods['listname']=goods['listname']+_0x13cb86['name']+'/';var _0x5047fb={};_0x5047fb['extra_sku']=_0x13cb86['code'];if(_0xdc6138['display_type']=='bar')_0x5047fb['qty']=_0x13cb86['num'];else _0x5047fb['qty']=0x7475f^0x7475e;goods['addExtra']['push'](_0x5047fb);that['Detail']['customization_data']['customizations']['forEach'](function(_0x5692d3,_0x5b0936){var _0x34f1e7=![];_0x5692d3['extra_list']['forEach'](function(_0x46bc9c,_0x3fbefb){if(_0x5692d3['redcircle']&&_0x5692d3['parent_code']==_0x13cb86['code']){if(_0x5692d3['display_type']=='bar'){if(_0x46bc9c['num']>(0x79c62^0x79c62))_0x34f1e7=!![];if(_0x3fbefb==_0x5692d3['extra_list']['length']-(0x8a978^0x8a979)&&!_0x34f1e7){flag=!![];title=_0x5692d3['name'];throw Error();}}else{if(_0x46bc9c['active'])_0x34f1e7=!![];if(_0x3fbefb==_0x5692d3['extra_list']['length']-(0x3f6af^0x3f6ae)&&!_0x34f1e7){flag=!![];title=_0x5692d3['name'];throw Error();}}}if(_0x5692d3['parent_code']==_0x13cb86['code']&&(_0x46bc9c['active']||_0x5692d3['display_type']=='bar'&&_0x46bc9c['num']>(0x247cf^0x247cf))){var _0x4fd461={};goods['listname']=goods['listname']+_0x46bc9c['name']+'/';_0x4fd461['extra_sku']=_0x46bc9c['code'];if(_0x5692d3['display_type']=='bar')_0x4fd461['qty']=_0x46bc9c['num'];else _0x4fd461['qty']=0x5879d^0x5879c;goods['addExtra']['push'](_0x4fd461);that['Detail']['customization_data']['customizations']['forEach'](function(_0x1f4400,_0x3487f9){var _0x4f024f=![];_0x1f4400['extra_list']['forEach'](function(_0x78758d,_0x487541){if(_0x1f4400['redcircle']&&_0x1f4400['parent_code']==_0x46bc9c['code']){if(_0x1f4400['display_type']=='bar'){if(_0x78758d['num']>(0xc63e0^0xc63e0))_0x4f024f=!![];if(_0x487541==_0x1f4400['extra_list']['length']-(0x3b092^0x3b093)&&!_0x4f024f){flag=!![];title=_0x1f4400['name'];throw Error();}}else{if(_0x78758d['active'])_0x4f024f=!![];if(_0x487541==_0x1f4400['extra_list']['length']-0x1&&!_0x4f024f){flag=!![];title=_0x1f4400['name'];throw Error();}}}if(_0x1f4400['parent_code']==_0x46bc9c['code']&&(_0x78758d['active']||_0x1f4400['display_type']=='bar'&&_0x78758d['num']>(0x526d6^0x526d6))){goods['listname']=goods['listname']+_0x78758d['name']+'/';var _0x4a0d89={};_0x4a0d89['extra_sku']=_0x78758d['code'];if(_0x1f4400['display_type']=='bar')_0x4a0d89['qty']=_0x78758d['num'];else _0x4a0d89['qty']=0x1;goods['addExtra']['push'](_0x4a0d89);}});});}});});}else if(_0xdc6138['specification_code']){if(_0x13cb86['active'])goods['listname']=goods['listname']+_0x13cb86['name']+'/';}});});}catch(_0x23aa51){}if(flag){that['showTip']('请选择'+title);return;}goods['listname']=goods['listname']['substr'](0x0,goods['listname']['length']-(0xc865a^0xc865b));if(that['TemperatureCode']){var list={'extra_sku':that['TemperatureCode'],'qty':0x1};goods['addExtra']['push'](list);}
                //确定组合
                console.log(goods);

                // 加入购物车，2022年9月30日09:51:02
                let starData=localStorage.getItem('star_'+this.si);
                let cart={};
                cart.product_id=this.pi;
                cart.product_name=goods['goodName'];
                cart.product_img=goods['goodImg'];
                cart.amount=goods['num'];
                cart.sku=goods['listname'];
                cart.p_price=goods['original'];//原价
                cart.product_details=goods['addExtra'];//进阶选项
                cart.s_price=goods['sale']; //实际价格
                cart.skuId=goods['skuId'];
                let starArr=[];
                let obj={};
                if(starData){
                    obj=JSON.parse(starData);
                    starArr=obj.starArr;
                }
                starArr.push(cart);
                obj.starArr=starArr;
                localStorage.setItem('star_'+this.si,JSON.stringify(obj));
                window.location.href = document.referrer;
            },
            accMul(num1, num2) {
                var m = 0, s1 = num1.toString(), s2 = num2.toString();
                try {
                    m += s1.split(".")[1].length
                } catch (e) {
                }
                ;
                try {
                    m += s2.split(".")[1].length
                } catch (e) {
                }
                ;
                return (Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)).toFixed(2);
            },
            // 两个浮点数求和
            accAdd(num1, num2) {
                var r1, r2, m;
                try {
                    r1 = num1.toString().split('.')[1].length;
                } catch (e) {
                    r1 = 0;
                }
                try {
                    r2 = num2.toString().split(".")[1].length;
                } catch (e) {
                    r2 = 0;
                }
                m = Math.pow(10, Math.max(r1, r2));
                // return (num1*m+num2*m)/m;
                return Math.round(num1 * m + num2 * m) / m;
            },

            // 两个浮点数相减
            accSub(num1, num2) {
                var r1, r2, m, n;
                try {
                    r1 = num1.toString().split('.')[1].length;
                } catch (e) {
                    r1 = 0;
                }
                try {
                    r2 = num2.toString().split(".")[1].length;
                } catch (e) {
                    r2 = 0;
                }
                m = Math.pow(10, Math.max(r1, r2));
                n = (r1 >= r2) ? r1 : r2;
                return (Math.round(num1 * m - num2 * m) / m).toFixed(2);
            },

            //提示
            showTip(msg){
                //console.log(msg);
                alert(msg);
            },
        }
    })
</script>
<style scoped>
    .bottom-div {
        box-sizing: border-box;
    }

    @media screen and (min-width: 414px) {
        .bottom-div {
            max-width: 414px;
        }
    }

    .active {
        background: rgba(170, 170, 170, 0.15)
    }

    .active p {
        color: #333 !important
    }

    .allcenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .vertical-center {
        display: flex;
        align-items: center;
    }

    .justify-align {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pa {
        position: absolute;
    }

    .pr {
        position: relative;
    }

    .mt5 {
        margin-top: 5px;
    }

    .mr5 {
        margin-right: 5px;
    }

    .ml5 {
        margin-left: 5px;
    }

    .mb5 {
        margin-bottom: 5px;
    }

    .mt10 {
        margin-top: 10px
    }

    .mr10 {
        margin-right: 10px
    }

    .ml10 {
        margin-left: 10px
    }

    .mb10 {
        margin-bottom: 10px
    }

    .mt15 {
        margin-top: 15px
    }

    .mr15 {
        margin-right: 15px;
    }

    .ml15 {
        margin-left: 15px;
    }

    .mt20 {
        margin-top: 20px
    }

    .mt30 {
        margin-top: 30px
    }

    .mb30 {
        margin-bottom: 30px
    }

    .fz10 {
        font-size: 10px;
    }

    .fz11 {
        font-size: 11px;
    }

    .fz12 {
        font-size: 12px;
    }

    .fz13 {
        font-size: 13px;
    }

    .fz14 {
        font-size: 14px
    }

    .fz15 {
        font-size: 15px
    }

    .fz16 {
        font-size: 16px
    }

    .fz18 {
        font-size: 18px
    }

    .fz20 {
        font-size: 20px
    }

    .fz25 {
        font-size: 25px
    }

    .fz30 {
        font-size: 30px
    }

    /*小屏幕处理*/
    @media screen and (max-width: 330px) {
        .mt5 {
            margin-top: 3px;
        }

        .mb5 {
            margin-bottom: 3px;
        }

        .ml5 {
            margin-left: 3px;
        }

        .mr5 {
            margin-right: 3px;
        }

        .mt10 {
            margin-top: 8px
        }

        .mb10 {
            margin-bottom: 8px
        }

        .mr10 {
            margin-right: 8px
        }

        .ml10 {
            margin-left: 8px
        }

        .mt15 {
            margin-top: 13px
        }

        .ml15 {
            margin-left: 10px;
        }

        .mr15 {
            margin-right: 10px;
        }

        .mt20 {
            margin-top: 18px
        }

        .mb30 {
            margin-bottom: 25px
        }

        .mt30 {
            margin-top: 25px
        }

        .fz10 {
            font-size: 8px;
        }

        .fz12 {
            font-size: 10px;
        }

        .fz13 {
            font-size: 12px;
        }

        .fz14 {
            font-size: 12px
        }

        .fz15 {
            font-size: 13px;
        }

        .fz16 {
            font-size: 14px
        }

        .fz18 {
            font-size: 16px
        }

        .fz20 {
            font-size: 18px
        }

        .fz25 {
            font-size: 20px;
        }

        .fz30 {
            font-size: 25px;
        }

        .bluetab1 {
            width: 50px;
        }
    }

    .fb {
        font-weight: bold
    }

    .center {
        text-align: center;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .clear:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
    }

    ::-webkit-scrollbar {
        width: 0px;

    }

    /*针对本项目一些基本样式*/
    * {
        touch-action: auto;
        -webkit-user-select: auto;
    }

    hr {
        margin: 0;
        list-style: none;
        padding: 0;
    }

    p {
        margin: 0
    }
    .mask-loading { display: block; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.4); position: fixed; left: 0; top: 0; z-index: 12; } .tac { text-align: center; } .box { width: 156px; height: 150px; margin: 0 auto 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } img { max-width: 100%; border: 0; vertical-align: middle; } 
</style>
</html>
